<script setup>
  import {ref,watch} from 'vue'
  import {storeToRefs} from 'pinia'
  import {useShoppingCartStore } from '@/stores/shoppingCart.js'
  
  const {
    goodList,
    goodCount,
    totalPrice
  } = storeToRefs(useShoppingCartStore())
  const emit = defineEmits(['popup'])

  const expose = ref(false)

  watch(goodCount,() => !goodCount.value && emit('popup'))

  function handleTriggerClick(){
    if(!goodCount.value){
      return
    }
    if(expose.value){
      emit('popup')
      return
    }
    expose.value = true
  }

  function fold(){
    if(goodCount.value){
      return
    }
    expose.value = false
  }

  function handleSettle(){
    if(!goodCount.value){
      return
    }
    console.log('go pay')
  }

  defineExpose({
    fold
  })
</script>
<template>
  <view :class="['shopping-cart',expose ? 'shopping-cart-exposed':'']">
    <view class="trigger" @click="handleTriggerClick">
      <view v-if="goodCount" class="badge">{{ goodCount }}</view>
      <slot name="triggerIcon">
        <image src="@/static/cart.png"></image>
      </slot>
    </view>
    <view v-show="expose" class="content" @click="handleTriggerClick">
      <slot name="content">
        <view class="content-detail">
          <text class="label">预计到手</text>
          <text :class="['unit',totalPrice ? 'buy-able':'']">¥</text>
          <text :class="['total-price',totalPrice ? 'buy-able margin-left' :'']">{{totalPrice}}</text>
        </view>
      </slot>
    </view>
    <view :class="{action:true,'action-enable':Boolean(goodCount)}">
      <slot name="action">
        <view @click="handleSettle">
          <text class="label">{{ goodCount ? '去结算' : '不可结算' }}</text>
        </view>
      </slot> 
    </view>
  </view>
</template>
<style scoped lang="less">
  @size:100rpx;
  @exposeWidth:700rpx;
  @cartPositionOffset:15rpx;
  .shopping-cart {
    position:absolute;
    bottom:@cartPositionOffset;
    right:@cartPositionOffset;
    box-shadow: rgba(0,0,0,0.28) 0px 1px 8px 0px;
    width:@size;
    height:@size;
    border-radius:@size / 2 ;
    overflow: hidden;
    z-index:999;
    background-color: #fff;
    display:flex;

    .trigger {
      display:flex;
      justify-content: center;
      align-items: center;
      padding-left:15rpx;
      position:relative;

      @badgeSize:30rpx;
      .badge {
        position:absolute;
        top:@badgeSize / 2 - 10rpx;
        right:@badgeSize / 2;
        width:@badgeSize;
        height:@badgeSize;
        border-radius: @badgeSize / 2;
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: #C1A379;
        color:#fff;
        z-index:1000;
      }

      @offset:15rpx;
      image {
        width:@size - @offset;
        height:@size - @offset;
      }
    }

    .content {
      flex:1;
      display:flex;
      align-items: center;
      padding-left:30rpx;
      .label {
        font-size:35rpx;
        font-weight:bold;
      }
      .unit {
        font-size:30rpx;
      }
      .total-price {
        font-size:40rpx;
      }
      .margin-left {
        margin-left:10rpx;
      }
      .buy-able {
        color:#F95731;
      }
    }

    .action {
      width:200rpx;
      background-color: #BFC3E6 ;
      color:white;
      display:flex;
      justify-content: center;
      align-items: center;
      .label {
        font-size:30rpx !important;
        // font-weight:bold;
      }
    }
    .action-enable {
      background-color: #0022AB !important;
    }
  }

  .shopping-cart-exposed {
    width:@exposeWidth !important;

  }

</style>